<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>成绩管理</title>
    <style>
        /* 添加到 student-list.jsp 和 grade-list.jsp 的 style 部分 */
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            margin: 0;
            font-size: 1.5rem;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-info span {
            color: #ecf0f1;
        }

        .container {
            display: flex;
            min-height: calc(100vh - 60px);
        }

        .sidebar {
            width: 200px;
            background-color: white;
            box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            padding: 1rem 0;
        }

        .nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-item {
            margin-bottom: 0.5rem;
        }

        .nav-item a {
            color: #2c3e50;
            text-decoration: none;
            padding: 0.8rem 1.5rem;
            display: block;
            transition: all 0.3s;
        }

        .nav-item a:hover {
            background-color: #f0f0f0;
            padding-left: 2rem;
        }

        .nav-item.active a {
            background-color: #3498db;
            color: white;
        }

        .main-content {
            flex: 1;
            padding: 2rem;
            background-color: #f5f5f5;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .page-header h2 {
            margin: 0;
            color: #2c3e50;
        }

        .search-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .search-form input,
        .search-form select {
            padding: 8px;
            margin-right: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-success {
            background-color: #2ecc71;
            color: white;
        }

        .btn-danger {
            background-color: #e74c3c;
            color: white;
        }

        .btn-logout {
            background-color: #e74c3c;
            color: white;
        }

        .btn-link {
            color: #3498db;
            background: none;
        }

        .btn-link:hover {
            text-decoration: underline;
        }

        table {
            width: 100%;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #2c3e50;
            color: white;
        }

        tr:hover {
            background-color: #f9f9f9;
        }

        .actions {
            display: flex;
            gap: 10px;
        }

        .no-data {
            text-align: center;
            padding: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>学生成绩管理系统</h1>
        <div class="user-info">
            <span>欢迎, ${user.username}</span>
            <a href="logout" class="btn btn-logout">退出登录</a>
        </div>
    </div>

    <div class="container">
        <div class="sidebar">
            <ul class="nav-list">
                <li class="nav-item"><a href="dashboard.jsp">首页</a></li>
                <li class="nav-item"><a href="student?action=list">学生管理</a></li>
                <li class="nav-item active"><a href="grade?action=list">成绩管理</a></li>
                <li class="nav-item"><a href="changePassword">修改密码</a></li>
            </ul>
        </div>

        <div class="main-content">
            <div class="page-header">
                <h2>成绩列表</h2>
                <a href="dashboard.jsp" class="btn btn-link">返回首页</a>
            </div>

            <div class="search-form">
                <form action="grade" method="get">
                    <input type="hidden" name="action" value="list">
                    <input type="text" name="studentNumber" placeholder="学号" value="${param.studentNumber}">
                    <input type="text" name="courseName" placeholder="课程名称" value="${param.courseName}">
                    <select name="semester">
                        <option value="">选择学期</option>
                        <option value="2024-春季">2024-春季</option>
                        <option value="2024-秋季">2024-秋季</option>
                    </select>
                    <button type="submit" class="btn btn-primary">搜索</button>
                    <a href="grade-add.jsp" class="btn btn-success">添加成绩</a>
                </form>
            </div>

            <table>
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                        <th>学期</th>
                        <th>考试日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach var="grade" items="${gradeList}">
                        <tr>
                            <td>${grade.studentNumber}</td>
                            <td>${grade.studentName}</td>
                            <td>${grade.courseName}</td>
                            <td>${grade.score}</td>
                            <td>${grade.semester}</td>
                            <td>${grade.examDate}</td>
                            <td class="actions">
                                <a href="grade?action=edit&id=${grade.id}" class="btn btn-primary">编辑</a>
                                <a href="grade?action=delete&id=${grade.id}"
                                   onclick="return confirm('确定要删除该成绩记录吗？')"
                                   class="btn btn-danger">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
